import { Button, Card, Form, Input, Select } from "antd";
import { useState } from "react";

interface Props {
    onSubmit: (values: API.AppAddRequest) => void;
    onCancel: () => void;
}

const CreateAppComponent: React.FC<Props> = (props) => {


    const { onSubmit } = props;
    const [formData, setFormData] = useState<API.AppAddRequest>({
        appName: '',
        appIcon: '',
        appDesc: '',
        appType: 0,
        scoringStrategy: 0,
    })

    return (
        <>
            <Card style={{ height: '400px' }}>

                <Form>
                    <Form.Item name="appName" label="应用名称" rules={[{ required: true, message: '请输入应用名称' }]}>
                        <Input value={formData.appName} onChange={(e) => {
                            setFormData({
                                ...formData,
                                appName: e.target.value,
                            })
                        }} />
                    </Form.Item>
                    <Form.Item name="appIcon" label="应用图标" rules={[{ required: true, message: '请输入应用图标' }]}>
                        <Input value={formData.appIcon} onChange={(e) => {
                            setFormData({
                                ...formData,
                                appIcon: e.target.value,
                            })
                        }} />
                    </Form.Item>
                    <Form.Item name="appDesc" label="应用描述" rules={[{ required: true, message: '请输入应用描述' }]}>
                        <Input.TextArea value={formData.appDesc} onChange={(e) => {
                            setFormData({
                                ...formData,
                                appDesc: e.target.value,
                            })
                        }} />
                    </Form.Item>
                    <Form.Item name="appType" label="应用类型" rules={[{ required: true, message: '请选择应用类型' }]}>
                        <Select options={[
                            {
                                label: '得分类',
                                value: 0,
                            },
                            {
                                label: '测评类',
                                value: 1,
                            },
                        ]} value={formData.appType} onChange={(e) => {
                            setFormData({
                                ...formData,
                                appType: e,
                            })
                        }} />
                    </Form.Item>
                    <Form.Item name="scoringStrategy" label="评分策略" rules={[{ required: true, message: '请选择评分策略' }]}>
                        <Select options={[
                            {
                                label: '自定义',
                                value: 0,
                            },
                            {
                                label: 'AI',
                                value: 1,
                            },
                        ]} value={formData.scoringStrategy} onChange={(e) => {
                            setFormData({
                                ...formData,
                                scoringStrategy: e,
                            })
                        }} />
                    </Form.Item>
                </Form>

            </Card>
            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 20, gap: 10 }}>
                <Button type="primary" onClick={() => {
                    onSubmit(formData);
                }}>创建</Button>
            </div>
        </>
    )
}
export default CreateAppComponent;